import React, {Component, PropTypes} from 'react';
import {observer} from 'mobx-react'
import fetchJsonp from 'fetch-jsonp'
import '../styles/RankPage.css';
import back_white from '../assets/icon-back-white.svg'
import play from '../assets/icon-play.png'
import black from '../assets/icon-...black.png'
@observer
class RankPage extends Component {

  constructor(props) {
    super(props)
    this.hideSinger = this.hideSinger.bind(this)
    this.state = {
      topListData: {},
      opacity: 0,
      menuShow: false,
      menuedIndex: 0,
      menus: {},
    }
  }

  hideSinger(e) {
    const {hideRank} = this.props
    e.preventDefault();
    hideRank();
  }

  componentDidMount() {
    const {topId} = this.props;
    fetchJsonp('http://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg?g_tk=5381&uin=0&format=json&inCharset=utf-8&outCharset=utf-8&notice=0&platform=h5&needNewCode=1&tpl=3&page=detail&type=top&topid=' + topId + '&_=' + new Date().getTime(), {
      jsonpCallback: 'jsonpCallback'
    })
      .then(res => res.json())
      .then((response) => {
        this.setState({
          topListData: response
        })
      })
  }

  render() {
    return (
      <div id="rankpage">
        <div className="singer-photo">
          {
            this.state.topListData.topinfo && <img src={this.state.topListData.topinfo.pic_album} role="presentation"/>
          }
        </div>
        <div className="header-bar" style={{background: 'rgb(51, 68, 69)'}}>
          <div className="back-button" onClick={this.hideSinger} onTouchEnd={this.hideSinger}>
            <div className="back-icon">
              <img src={back_white} role="presentation"/>
            </div>
            <div className="back-text">
              排行榜
            </div>
          </div>
        </div>
        {
          this.state.topListData.topinfo &&
          <div id="singer-header" className="header border-1px border-1px-after">
            <div className="header-blank"></div>
            <div className="header-warp"
                 style={{background: '-webkit-linear-gradient(top, rgba(51, 68, 69, 0), rgb(51, 68, 69))'}}>
              <div className="singer-info">
                <h1 className="singer-name">{this.state.topListData.topinfo.ListName}</h1>
                <p className="singer-fans">{this.state.topListData.topinfo.listennum}</p>
              </div>
              <div className="play-button">
                <img src={play} role="presentation"/>
              </div>
            </div>
          </div>
        }

        {
          this.state.topListData.songlist &&


          <div className="list">
            <ul>
              {
                this.state.topListData.songlist.map((item, index) => (
                  <li className="border-1px border-1px-after">
                    <div className="music-index">{index + 1}</div>
                    <div className="music-info">
                      <div className="music-name">
                        {item.data.songorig}
                      </div>
                      <div className="music-singer">
                        {
                          item.data.singer.map(singername => (
                            <span>{singername.name}-</span>
                          ))
                        }
                        <span>{item.data.albumname}</span>
                      </div>
                    </div>
                    <div className="action-button">
                      <img src={black} alt=""/>
                    </div>
                  </li>
                ))
              }

            </ul>
          </div>
        }

      </div>
    );
  }
}

RankPage.propTypes = {
  topId: PropTypes.number.isRequired,
  hideRank: PropTypes.func.isRequired,
}

export default RankPage;
